<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>框模型</title>
		<style>
			/*外边距？所有元素都具备边框以外距离，四个，上下 左右
			外边距问题1.行内内元素：a，i，delete...只支持左右边距
			           布局，支持左右推动效果
					   解决方案：行转块
			常用的margin属性：两个属性值：   margin：auto 剧中
			*/
		span{
				border: 1px solid red;
				/*margin外边框属性：1个属性值*/
				margin: 300px;   /*？ 上下 左右   上下效果没有*/
				/*margin外边框属性：两个属性值：上下  左右*/
				margin: 100px 200px;
				/*margin外边框属性：3个属性值：上  左右  下*/
				margin: 100px 200px 300px;
				/*margin外边框属性：4个属性值：上  右  下 左*/
				margin: 100px 200px 300px 400px;
				/*常用属性：自适应居中*/
				margin: ;
			}
			h1{
				width: 50%;
				border: 1px solid red;
				/*margin外边框属性：1个属性值*/
				margin: 300px;   /*？ 上下 左右   上下效果没有*/
				/*margin外边框属性：两个属性值：上下  左右*/
				margin: 100px 200px;
				/*margin外边框属性：3个属性值：上  左右  下*/
				margin: 100px 200px 300px;
				/*margin外边框属性：4个属性值：上  右  下 左*/
				margin: 100px 200px 300px 400px;
				/*常用属性：自适应居中*/
				margin: auto;
				margin-left: 800px;
			}
			/*外边距问题2：外边距合并问题：
			上下元素都存在外边距，垂直以最大外边距值为主
			外边距垂直合并，最大外边距为主，怎么解决
			推荐1.margin设置一个值，上下会垂直，去掉一个上下元素其中上、下外边距，重新计算*/
			    2.
			#parent{
				width: 200px;
				height: 200px;
				background: #5679eb ;
				margin-top: 30px;
				/*padding-top: 1px;*/ 
				/*父元素  border:1px solid transparent;*/
				border:1px solid transparent;
				/*父元素： overflow:hidden;创建新块级上下文，阻止外边距合并*/
				overflow: hidden;
			}
			#child{
				margin-top: 30px;
				width: 100px;
				height: 100px;
				background: #eb6cba ;			
			}
		</style>
	</head>
	<body>
		
		<h1>外边距合并</h1>
		<div id="parent">
			<div id="child"></div>
		</div>
		
		<hr>
		<!--元素：存在与框模型=外边距+边框+内边距+内容
		有些元素默认外边距，处理方案：通配选择器，去掉元素外边距
		-->
		<span>行内元素</span>
		<h1>块元素</h1>
		<ul>aa</ul>
	</body>
</html>


<!--  有没有外边距
	  ul  li    √
      form input     ×
考试	  table tr td    ×
	  p				 √
-->